<style>
    .layui-btn .layui-icon{
        margin-right: 0;
    }
    .layui-layer-page .layui-layer-content{
        overflow: initial;
    }
</style>
<form class="layui-form seller-form" action="">
	<div class="layui-form-item">
		<div class="layui-inline">
			<button class="layui-btn add-class layui-btn-sm"><i class="layui-icon">&#xe608;</i> 添加</button>
		</div>
	</div>
</form>
<div class="table-body">
	<table id="typeTable" lay-filter="test"></table>
</div>
<script>
    var table;
    layui.use(['form', 'layedit', 'laydate','table'], function(){
        var form = layui.form;

        table = layui.table.render({
            elem: '#typeTable',
            height: 'full-99',
            cellMinWidth: '80',
            page: 'true',
            limit:'20',
            url: "{:url('GoodsType/index')}?_ajax=1",
            id:'typeTable',
            cols: [[
				{field:'id', width:90, title:'ID', align: 'center'},
                {field:'name', width:200,title:'名称', align: 'center'},
                {field:'params', minWidth:200,title:'参数',templet:function (data) {
                    if(typeof(data.params) == "undefined"||data.params.length==0){
                        var html='<a href="javascript:void(0);" data-id="'+data.id+'" onclick="addParams('+data.id+')">关联参数</a>';
                        return html;
                    }else{
                        var html=' <a href="javascript:void(0);" data-id="'+data.id+'" onclick="addParams('+data.id+')">变更参数</a>';
                        $.each(data.params,function(i,j){
                            html = html + "|"+ j.name;
                        });
                        html=html.substr(1);
                        return html;
                    }
                }, align: 'center'},
                {field:'spec', minWidth:200,title:'属性',templet:function(data){
                    if(typeof(data.spec) == "undefined"||data.spec.length==0){
                        var html='<a href="javascript:void(0);" data-id="'+data.id+'" onclick="addRel('+data.id+')">关联属性</a>';
                        return html;
                    }else{
                        var html=' <a href="javascript:void(0);" data-id="'+data.id+'" onclick="addRel('+data.id+')">变更属性</a>';
                        $.each(data.spec,function(i,j){
                            html = html + "|"+ j.name;
                        });
                        html=html.substr(1);
                        return html;
                    }
                }, align: 'center'},
                {field:'operating',title:'操作',templet:function(data){
                    var html='';
                    var html = '<a  class="layui-btn layui-btn-xs edit-class" data-id="' + data.id + '" lay-event="edit">编辑</a>';
                    html += '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-name="'+data.name+'" data-id="' + data.id + '">删除</a>';
                    return html;
                }, align: 'center', width: 140}
            ]]
        });
        layui.form.on('submit(*)', function(data){
            layui.table.reload('userTable', {
                where: data.field
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //添加分类
        $(document).on('click', '.add-class', function(){
            var id = $(this).attr('data-id');
            JsGet('{:url("GoodsType/add")}', function(e){
				if(e.status){
					window_box = layer.open({
						type: 1,
						title: '添加类型',
						area: setpage(750,440), //宽高
						content: e.data,
						btn:['保存','关闭'],
						success:function (layero,index) {
							layero.addClass('layui-form');//添加form标识
							layero.find('.layui-layer-btn0').attr('lay-filter', 'fromContent').attr('lay-submit', '');
							form.render();
						},
						yes:function () {
							form.on('submit(fromContent)', function (data) {
								JsPost("{:url('GoodsType/add')}", data.field, function(res){
									if(res.status){
										layer.close(window_box);
										layer.msg(res.msg, {time: 1300}, function(){
											table.reload('typeTable');
										});
									}else{
										layer.msg(res.msg);
									}
								})
							});
						}
					});
				}else{
					layer.msg(e.msg);
				}
			});
            return false;
        });


        layui.table.on('tool(test)',function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var id = data.id;
           
            //编辑属性
            if(layEvent == 'edit'){
                JsGet('{:url("GoodsType/edit")}?id='+id, function(e){
                    if(e.status){
                        window_box = layer.open({
                            type: 1,
                            title: '编辑类型',
                            area: setpage(400,240), //宽高
                            content: e.data,
                            btn:['保存','关闭'],
                            yes:function () {
                                var name = $("#type_name").val();
                                var id = $("#type_id").val();
                                var __Jshop_Token__ = $(".Jshop_Token:last").val();
                                var validate_form = $("input[name='validate_form']").val();

                                var error = false;
                                if(name.length > 6 || name.length < 1){
                                    error = true;
                                    layer.msg('分类名称在1-6个字符之间', {time: 1300});
                                    return false;
                                }
                                if(!id||id==''){
                                    layer.msg('关键参数丢失', {time: 1300});
                                    return false;
                                }
                                if(!error){
                                    JsPost('{:url("GoodsType/edit")}', {
                                        'name': name,
                                        'id':id,
                                        __Jshop_Token__:__Jshop_Token__,
                                        validate_form:validate_form
                                    }, function(e){
                                        if(e.status === true){
                                            data.name = name
                                            layer.msg(e.msg, {time: 1300}, function(){
                                                obj.update(data)
                                                layer.close(window_box);
                                            });
                                        }else{
                                            layer.msg(e.msg, {time: 1300});
                                        }
                                    });
                                }
                            }
                        });
                    }else{
                        layer.msg(e.msg);
                    }
                });
            }else if(layEvent == 'del'){
                layer.confirm('确认删除类型：'+data.name+' 吗？', {
                title: '提示', btn: ['确认', '取消'] //按钮
                }, function(){
                    JsPost('{:url("GoodsType/del")}', {'id': id}, function(e){
                        layer.msg(e.msg, {time: 1300}, function(){
                            obj.del();
                        });
                    });
                });
            }
        })
    });

    /**
     * 关联属性
     */
    function addRel(id){
        JsGet('{:url("GoodsType/addRel")}?id='+id,function (e) {
			if(e.status){
				window_box = layer.open({
					type: 1,
					title: '关联属性',
					area: setpage(440,340), //宽高
					btn:['保存','取消'],
					content: e.data,
					yes:function (e) {
						var data = $("#specForm").serializeArray();
						JsPost('{:url("GoodsType/addRel")}',data,function (e) {
							if(e.status === true){
								layer.close(window_box);
								layer.msg(e.msg, {time: 1300}, function(){
									table.reload('typeTable');
								});
							}else{
								layer.msg(e.msg, {time: 1300});
							}
						});
					}
				});
			}else{
				layer.msg(e.msg);
			}
        });
    }

    /**
	 * 关联参数
     * @param id
     */
    function addParams(id) {
        JsGet('{:url("GoodsType/addParams")}?id='+id,function (e) {
			if(e.status){
				window_box = layer.open({
					type: 1,
					title: '关联属性',
					area: setpage(400,340), //宽高
					content: e.data,
					btn:['保存','取消'],
					yes:function (e) {
						var data = $("#paramsForm").serializeArray();
						JsPost('{:url("GoodsType/addParams")}',data,function (e) {
							if(e.status === true){
								layer.close(window_box);
								layer.msg(e.msg, {time: 1300}, function(){
									table.reload('typeTable');
								});
							}else{
								layer.msg(e.msg, {time: 1300});
							}
						});
					}
				});
			}else{
				layer.msg(e.msg);
			}
        });
    }
</script>